<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!--//How to blend the SVG noise with the object-->

    <!--//there are a few possible ways to make this happen-->
    <!--//1) The first isn't a particularly elegant solution. You recreate the object below the original layer and filter a transparent gradient through that. It means that the fade out of the noise you're seeing is actually just another object fading over the top.-->

    <!--//It isn't the greatest because it requires a duplicate.-->

    <!--//The ideal would be having it all handled by the filter itself, or by the clip path blurring somehow-->


    <style>
    .container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: 100vh;
    }
    .icon-svg {
    width: 384px;
    height: 384px;
    display: block;
    }
    .icon-svg--bolt {
    color: #5ecf86;
    }
    </style>
</head>
<body>
<div class="container">
    <svg class="icon-svg icon-svg--bolt" viewBox="0 0 24 24" width="96" height="96" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <radialGradient id="gradient2">
                <stop offset="10%" stop-opacity="1" stop-color="#5ECF86" />
                <stop offset="90%" stop-opacity="0" stop-color="#5ECF86" />
            </radialGradient>
            <linearGradient id="gradient" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="40%" stop-color="#5ECF86" stop-opacity="1" offset="0" />
                <stop offset="60%" stop-color="#5ECF86" stop-opacity="0" offset="1" />
            </linearGradient>
            <clipPath id="the-object">
                <path fill="currentColor" d="M 12 3
             v 7
             h 6
             l -6 11
             v -7
             h -6
             l 6 -11">
                </path>
            </clipPath>
            <filter id="noise">
                <feTurbulence type="fractalNoise" baseFrequency="8" result="noisy" />
                <feColorMatrix type="saturate" values="0" />
                <feBlend in="SourceGraphic" in2="noisy" mode="multiply" />
            </filter>

        </defs>

        <g>
            <path filter="url(#noise)" clip-path="url(#the-object)" fill="currentColor" d="M 12 3
             v 7
             h 6
             l -6 11
             v -7
             h -6
             l 6 -11">
            </path>
        </g>
        <g>
            <path fill="url(#gradient2)" d="M 12 3
             v 7
             h 6
             l -6 11
             v -7
             h -6
             l 6 -11">
            </path>
        </g>
    </svg>
</div>
</body>
</html>